import { createStyles } from 'antd-style';
import { Flex } from 'antd';
import { useTheme } from '@/store/settingsStore.ts';
import { ThemeMode } from '@ycx/ui';
import { FC } from 'react';

const useStyle = (isLight: boolean) =>
  createStyles(({ css }) => {
    return {
      countLine: css`
        background-color: var(--ycx-chart-color);
        height: 4px;
        position: relative;
        width: 220px;
        border-radius: 2px;
        overflow: hidden;
        margin: 4px 0;

        & .percentage-line {
          background: linear-gradient(90deg, rgba(62, 255, 255, 1) 0%, rgba(76, 104, 255, 1) 100%);
          height: 100%;
        }

        & .segments {
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;

          & .segment {
            border-right: 1px solid ${isLight ? '#f4f6f8' : '#2c2f43'};
            height: 100%;
            flex: 1;

            &:last-child {
              border-right: none;
            }
          }
        }
      `,
    };
  });

type Props = {
  width: string;
};

const LineSegment: FC<Props> = ({ width }) => {
  const theme = useTheme();
  const { styles } = useStyle(theme === ThemeMode.Light)();
  return (
    <div className={styles.countLine}>
      <div className="percentage-line" style={{ width }}></div>
      <Flex className="segments">
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
        <div className="segment"></div>
      </Flex>
    </div>
  );
};

export default LineSegment;
